// content

const articleObj = {
  status: '', //文章状态（1-待审核，2-审核通过）空字符串-全部
  channel_id: '', //文章频道 id，空字符串-全部
  page: 1, //当前页码
  per_page: 2 //当前页面条数
}
// 获取文章列表并展示
// 获得文章条数
let count = 0
async function getArticle() {
  const res = await axios({
    url: '/v1_0/mp/articles',
    params: articleObj
  })
  console.log(res.data.data.total_count);
  const artcle = res.data.data.results.map(item => `<tr>
                <td>
                  <img
                    src="${item.cover.type === 1 ? item.cover.images[0] : `https://img2.baidu.com/it/u=2640406343,1419332367&fm=253&fmt=auto&app=138&f=JPEG?w=708&h=500`}"
                    alt="">
                </td>
                <td>${item.title}</td>
                <td>
                ${item.status === 1 ? `<span class="badge text-bg-primary">待审核</span>` : `<span class="badge text-bg-success">审核通过</span>`}
                
                  
                </td>
                <td>
                  <span>${item.pubdate}</span>
                </td>
                <td>
                  <span>${item.read_count}</span>
                </td>
                <td>
                  <span>${item.comment_count}</span>
                </td>
                <td>
                  <span>${item.like_count}</span>
                </td>
                <td>
                  <i class="bi bi-pencil-square edit" data-id="${item.id}">编辑</i>
                  <i class="bi bi-trash3 del" data-id="${item.id}">删除</i>
                </td>
              </tr>`).join('')
  document.querySelector('.art-list').innerHTML = artcle
  count = res.data.data.total_count
  document.querySelector('.total-count').innerHTML = `共${count}条`
}
getArticle()

// 帅选文章列表
async function getChannel() {
  // 获得频道
  const channel = await axios({ url: '/v1_0/channels' })
  console.log(channel);
  const Str = `<option value="" selected>请选择文章频道</option>` + channel.data.data.channels.map(item => `   <option value="${item.id}">${item.name}</option>`).join('')
  document.querySelector('.form-select').innerHTML = Str
}
getChannel()

// 筛选条件
document.querySelectorAll('.form-check').forEach(radio => {
  radio.addEventListener('click', e => {
    // console.log(e.target.value);
    articleObj.status = e.target.value
  })
})
// 筛选频道
document.querySelector('.form-select').addEventListener('change', e => {
  // console.log(e.target.value);
  articleObj.channel_id = e.target.value
})

// 匹配筛选数据
document.querySelector('.sel-btn').addEventListener('click', e => {
  getArticle()
})

// 分页功能
// 下一页
document.querySelector('.next').addEventListener('click', () => {
  // 当前页码小于最大页码值
  if (articleObj.page < Math.ceil(count / articleObj.per_page)) {
    articleObj.page++
    document.querySelector('.page-now').innerHTML = `第${articleObj.page}页`
    getArticle()
  }
})
document.querySelector('.last').addEventListener('click', () => {
  if (articleObj.page > 1) {
    articleObj.page--
    document.querySelector('.page-now').innerHTML = `第${articleObj.page}页`
    getArticle()
  }
})


// 删除功能
// 关联文章的id
document.querySelector('.art-list').addEventListener('click', async e => {
  if (e.target.classList.contains('del')) {
    // const id = e.target.parentNode.dataset.id
    const id = e.target.dataset.id
    // console.log(id);
    // 删除文章
    const res = await axios({
      url: `/v1_0/mp/articles/${id}`,
      method: 'DELETE'
    })
    // 删除最后一条的最后一页，需要向前翻页
    const child = document.querySelector('.art-list').children
    if (child === 1 && articleObj.page !== 1) {
      articleObj.page--
      document.querySelector('.page-now').innerHTML = `第${articleObj.page}页`
    }
    getArticle()
  }
})

// 编辑功能
document.querySelector('.art-list').addEventListener('click', async e => {
  if (e.target.classList.contains('edit')) {
    const id = e.target.dataset.id
    location.href = `../public/index.html?id=${id}`
  }

})







